<template>
	<view class="container">
		<view>
			<view class="intro"><img src="https://oss.1qizhuang.com/image/app/page_1_price_new.png" class="top_image" /></view>
			<view class="main_container">
				<view class="title">装修公司为您免费报价</view>
				<view class="title_image"><img mode="widthFix" src="https://oss.1qizhuang.com/image/app/calculater.gif" /></view>
				<view class="input_container">
					<u-form-item label="面 积" :label-width="150" :required="true">
						<u-input v-model="form.area" placeholder="请输入房屋面积" maxlength="5" step="" autocomplete="off" type="" />
						<span class="right_title">㎡</span>
					</u-form-item>
					<u-form-item label="房 型" :label-width="150" :required="true">
						<u-input type="select" placeholder="选择房型" v-model="fx" @click="showhousetype = true" input-align="left" />
					</u-form-item>
					<u-form-item label="城 市" :label-width="150" :required="true">
						<u-input type="select" v-model="showcitypickerinput" placeholder="选择城市" @click="showcitypicker = true" disabled="" input-align="left" />
					</u-form-item>
					<u-form-item label="手机号" :label-width="150" :required="true">
						<u-input v-model="form.phone" placeholder="请输入手机号，获取报价" maxlength="11" step="" autocomplete="off" type="number" />
					</u-form-item>
				</view>
				<div class="warning">为了保障您的权益，您的所有信息不会泄露给他人</div>
				<div class="get_price" @click="getPrice">免费获取报价</div>
				<showPrice :halfPrice="halfPrice" :totalPrice="totalPrice" ref="showPrice"></showPrice>
			</view>
			<view class="new-offer swiper_container">
				<view class="swiper_title_container">
					<view class="swiper_title">最新报价</view>
					<view class="fake_color"></view>
				</view>
				<view class="new-offer-scroll"><offer-scroll :list="offer.list"></offer-scroll></view>
			</view>
		</view>

		<view>
			<view>
				<span>
					<a>
						<view class="sales-content" @click="go()">
							<view class="sales-head-img-div">
								<img
									src="https://media.1qizhuang.com/bgw/89858363?x-oss-process=image/resize,m_fill,w_100,h_100,limit_0/auto-orient,1/quality,q_90"
									class="sales-head-img"
								/>
							</view>
							<view class="sales-info-div">
								<view class="sales-tel-div"><img src="https://oss.1qizhuang.com/image/app/telephone.png" class="sales-tel-icon" /></view>
							</view>
						</view>
					</a>
				</span>
			</view>
			<u-select v-model="showhousetype" mode="mutil-column" :list="housetype.list" @confirm="selectHousetypeCallback"></u-select>
			<city-select v-model="showcitypicker" @city-change="cityChange"></city-select>
		</view>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
import showPrice from '@/components/showPrice/showPrice.vue';
import showdkPrice from '@/components/showPrice/showDaikuan.vue';
import offerScroll from '@/components/offer-scroll/offer-scroll.vue';
import citySelect from '../common/u-city-select.vue';
export default {
	data() {
		return {
			d1: '', // 总利息
			d2: '', // 还款总额
			d3: '', // 年利率
			d4: '', // 首月月供
			dkze: '', // 贷款总额
			hktype: '1',
			hkList: [
				{
					value: '1',
					name: '等额本息'
				},
				{
					value: '2',
					name: '等额本金'
				}
			],
			sfblLabel: '30%（三成）',
			showsfbl: false,
			sfbl: {
				list: [
					{ label: '10%（一成）', value: 0.1 },
					{ label: '20%（二成）', value: 0.2 },
					{ label: '30%（三成）', value: 0.3 },
					{ label: '40%（四成）', value: 0.4 },
					{ label: '50%（五成）', value: 0.5 },
					{ label: '60%（六成）', value: 0.6 },
					{ label: '70%（七成）', value: 0.7 },
					{ label: '80%（八成）', value: 0.8 },
					{ label: '90%（九成）', value: 0.9 }
				]
			},
			ajyearsLabel: '20年（240期）',
			showajyears: false,
			ajyears: {
				list: [
					{ label: '1年（12期）', value: 12 },
					{ label: '2年（24期）', value: 24 },
					{ label: '3年（36期）', value: 36 },
					{ label: '4年（48期）', value: 48 },
					{ label: '5年（60期）', value: 60 },
					{ label: '6年（72期）', value: 72 },
					{ label: '7年（84期）', value: 84 },
					{ label: '8年（96期）', value: 96 },
					{ label: '9年（108期）', value: 108 },
					{ label: '10年（120期）', value: 120 },

					{ label: '11年（132期）', value: 132 },
					{ label: '12年（144期）', value: 144 },
					{ label: '13年（156期）', value: 156 },
					{ label: '14年（168期）', value: 168 },
					{ label: '15年（180期）', value: 180 },
					{ label: '16年（192期）', value: 192 },
					{ label: '17年（204期）', value: 204 },
					{ label: '18年（216期）', value: 216 },
					{ label: '19年（228期）', value: 228 },
					{ label: '20年（240期）', value: 240 },

					{ label: '21年（252期）', value: 252 },
					{ label: '22年（264期）', value: 264 },
					{ label: '23年（276期）', value: 276 },
					{ label: '24年（288期）', value: 288 },
					{ label: '25年（300期）', value: 300 },
					{ label: '26年（312期）', value: 312 },
					{ label: '27年（324期）', value: 324 },
					{ label: '28年（336期）', value: 336 },
					{ label: '29年（348期）', value: 348 },
					{ label: '30年（360期）', value: 360 }
				]
			},
			sydform: {
				fprice: '',
				sfbl: 0.3,
				dkze: '', // 总贷款额
				ajyear: 240,
				ll: ''
			},
			fx: '',
			housetype: {
				list: [
					[
						{
							value: '0',
							label: '0室'
						},
						{
							value: '1',
							label: '1室'
						},
						{
							value: '2',
							label: '2室'
						},
						{
							value: '3',
							label: '3室'
						},
						{
							value: '4',
							label: '4室'
						},
						{
							value: '5',
							label: '5室'
						},
						{
							value: '6',
							label: '6室'
						}
					],
					[
						{
							value: '0',
							label: '0厅'
						},
						{
							value: '1',
							label: '1厅'
						},
						{
							value: '2',
							label: '2厅'
						},
						{
							value: '3',
							label: '3厅'
						},
						{
							value: '4',
							label: '4厅'
						},
						{
							value: '5',
							label: '5厅'
						},
						{
							value: '6',
							label: '6厅'
						}
					],
					[
						{
							value: '0',
							label: '0卫'
						},
						{
							value: '1',
							label: '1卫'
						},
						{
							value: '2',
							label: '2卫'
						},
						{
							value: '3',
							label: '3卫'
						},
						{
							value: '4',
							label: '4卫'
						},
						{
							value: '5',
							label: '5卫'
						},
						{
							value: '6',
							label: '6卫'
						}
					]
				]
			},
			showhousetype: false,
			tabList: [
				{
					id: 0,
					name: '房贷'
				},
				{
					id: 1,
					name: '装修'
				}
			],
			swiperCurrIndex: 0, //swiper当前位置
			swiperHegiht: 300, //swiper动态高度
			showcitypicker: false,
			showcitypickerinput: '',
			halfPrice: '',
			totalPrice: '',
			txt: '选择地址',
			title: 'Hello',
			offer: {
				list: []
			},
			form: {
				area: '',
				hoseSpaceType1: '',
				hoseSpaceType2: '',
				hoseSpaceType3: '',
				hoseSpaceType4: '',
				address: {
					city: '',
					province: '',
					country: ','
				},
				phone: ''
			}
		};
	},
	components: {
		citySelect,
		uniPopup,
		uniPopupMessage,
		showPrice,
		showdkPrice,
		offerScroll
	},
	onLoad: function(option) {
		console.log(option);
		this.setSwiperHeight();
	},
	onShow: function() {
		uni.request({
			url: 'http://www.mksoft.cn/zx/front/zhuangxiu/list', //接口地址
			header: {
				'content-type': 'application/json' //自定义请求头信息
			},
			method: 'GET',
			success: res => {
				if (res.data.code == 200) {
					this.offer.list = res.data.data;
				}
			}
		});
	},
	methods: {
		selectAjyearsCallback(e) {
			this.ajyearsLabel = e[0].label;
			this.sydform.ajyear = e[0].value;
		},
		selectSfblCallback(e) {
			this.sfblLabel = e[0].label;
			this.sydform.sfbl = e[0].value;
		},
		selectHousetypeCallback(e) {
			this.fx = e[0].value + '室' + ' - ' + e[1].value + '厅' + ' - ' + e[2].value + '卫';
			this.form.hoseSpaceType1 = e[0].value;
			this.form.hoseSpaceType2 = e[1].value;
			this.form.hoseSpaceType3 = e[2].value;
		},
		changeTab(e) {
			this.swiperCurrIndex = e;
		},

		//swiper组件的切换返回值
		swiperChange(e) {
			this.swiperCurrIndex = e.detail.current;
			this.setSwiperHeight();
		},
		//动态设置swiper高度
		setSwiperHeight() {
			const that = this;
			let obj = uni
				.createSelectorQuery()
				.in(this)
				.select('#swiper_id_' + this.swiperCurrIndex);
			obj.boundingClientRect(function(data) {
				//data - 各种参数
				if (data) {
					//得到px单位的高度，通过px转换rpx的单位换算(加上底部的间距或者存在底部按钮高度合成最后的rpx高度)
					that.swiperHegiht = data.height * 2 + 110;
				}
			}).exec();
		},
		go() {
			uni.makePhoneCall({
				// 手机号
				phoneNumber: '13812576975',
				// 成功回调
				success: res => {
					console.log('调用成功!');
				},
				// 失败回调
				fail: res => {
					console.log('调用失败!');
				}
			});
		},
		getDkPrice() {
			if (!this.sydform.fprice) {
				uni.showToast({
					icon: 'none',
					title: '请输入房款总价',
					duration: 2000
				});
				return false;
			}
			if (!this.sydform.dkze) {
				uni.showToast({
					icon: 'none',
					title: '请输入贷款总额',
					duration: 2000
				});
				return false;
			}
			if (!this.sydform.ll) {
				uni.showToast({
					icon: 'none',
					title: '请输入年利率',
					duration: 2000
				});
				return false;
			}
			this.d4 = this.sydform.ll;
			let yearRate = this.sydform.ll / 100;
			let invest = this.sydform.dkze * 10000;
			uni.request({
				url: 'http://www.mksoft.cn/zx/front/zhuangxiu/getDkcalcRes', //接口地址
				data: {
					invest: invest,
					yearRate: yearRate,
					totalmonth: this.sydform.ajyear,
					type: this.hktype
				},
				success: res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
						this.d1 = res.data.data.d1;
						this.d2 = res.data.data.d2;
						this.d3 = res.data.data.d3;
						this.dkze = this.sydform.dkze;
						this.$refs.showDkResult.handleShowPrice();
					} else {
						uni.showToast({
							title: '请稍后再试',
							duration: 2000
						});
					}
				},
				fail: res => {}
			});
			this.$refs.showDkResult.handleShowPrice();
		},
		getPrice() {
			if (!this.form.area) {
				uni.showToast({
					icon: 'none',
					title: '面积不能为空',
					duration: 2000
				});
				return false;
			}
			if (this.form.area <= 0) {
				uni.showToast({
					icon: 'none',
					title: '面积不能小于1m²',
					duration: 2000
				});
				return false;
			}
			if (!this.form.hoseSpaceType1) {
				uni.showToast({
					icon: 'none',
					title: '房型不能为空',
					duration: 2000
				});
				return false;
			}
			if (!this.form.address.province) {
				uni.showToast({
					icon: 'none',
					title: '请选择城市',
					duration: 2000
				});
				return false;
			}
			if (!this.form.phone) {
				uni.showToast({
					icon: 'none',
					title: '手机不能为空',
					duration: 2000
				});
				return false;
			} else {
				let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (!myreg.test(this.form.phone)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号',
						duration: 2000
					});
					return false;
				}
			}
			uni.request({
				url: 'http://www.mksoft.cn/zx/front/zhuangxiu/baojia', //接口地址
				header: {
					'content-type': 'application/json' //自定义请求头信息
				},
				method: 'POST',
				data: {
					squre: this.form.area,
					hoseSpaceType1: this.form.hoseSpaceType1,
					hoseSpaceType2: this.form.hoseSpaceType2,
					hoseSpaceType3: this.form.hoseSpaceType3,
					hoseSpaceType4: this.form.hoseSpaceType4,
					province: this.form.address.province,
					city: this.form.address.city,
					country: this.form.address.country,
					mobile: this.form.phone,
					userId: 100
				},
				success: res => {
					if (res.data.code == 200) {
						this.halfPrice = res.data.data.halfPrice;
						this.totalPrice = res.data.data.totalPrice;
						this.$refs.showPrice.handleShowPrice();
					} else {
						uni.showToast({
							title: '请稍后再试',
							duration: 2000
						});
					}
				}
			});
		},
		cityChange(e) {
			this.showcitypickerinput = e.province.label + '-' + e.city.label + '-' + e.area.label;
			this.form.address.province = e.province.label;
			this.form.address.city = e.city.label;
			this.form.address.country = e.area.label;
		},
		change(data) {
			this.txt = data.data.join('-');
			this.form.address.province = data.data[0];
			this.form.address.city = data.data[1];
		}
	}
};
</script>

<style lang="scss">
.fd-v {
	padding-left: 50rpx !important;
	padding-right: 50rpx !important;
}
.right_arrow {
	min-width: 6px;
	width: 6px;
	height: 10px;
}
.container {
	font-size: 14px;
	line-height: 24px;
}
.top_image {
	display: inline-block;
	width: 100%;
}
.left_title {
	font-size: 14px;
	font-family: PingFangSC;
	font-weight: 700;
	color: #000;
	line-height: 14px;
	min-width: 78px;
}
.main_container {
	margin: 0 15px;
	background: #fff;
	box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.08);
	border-radius: 5px;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	position: relative;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	flex-direction: column;
	padding: 15px 15px 20px 15px;
	margin-top: -55px;
	.title {
		font-size: 16px;
		color: #000;
		line-height: 16px;
		font-weight: 700;
		text-align: center;
	}
	.title_image {
		width: 100%;
		margin-top: 15px;
		img {
			width: 100%;
		}
	}
	.input_container {
		width: 100%;
		padding-top: 5px;
	}
	.warning {
		font-size: 12px;
		color: #ccc;
		line-height: 12px;
		margin-top: 15px;
		text-align: center;
	}
	.get_price {
		margin-top: 15px;
		font-weight: 700;
		width: 100%;
		padding: 15px 0;
		text-align: center;
		background: -webkit-linear-gradient(top, #ffdd34, #ffd05c);
		background: linear-gradient(180deg, #ffdd34, #ffd05c);
		border-radius: 5px;
		font-size: 16px;
		color: #000;
	}
}
.swiper_container {
	margin: 0 15px;
	padding-top: 30px;
	.swiper_title_container {
		height: 40px;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		.swiper_title {
			display: inline-block;
			font-size: 18px;
			color: #444;
			line-height: 18px;
			font-weight: 700;
			text-align: center;
			z-index: 99;
		}
		.fake_color {
			z-index: 98;
			margin-top: -5px;
			width: 60px;
			height: 5px;
			background: -webkit-linear-gradient(left, #fa9a70, #ff5824);
			background: linear-gradient(90deg, #fa9a70, #ff5824);
		}
		.carousel_container {
			display: flex;
			justify-items: center;
			margin-top: 21px;
			overflow: hidden;
			padding: 8px 15px 15px 15px;
			background: #fafafa;
			border-radius: 5px;
			margin-bottom: 58px;
			.uni_vertical_swiper {
				position: relative;
				.van-swipe {
					overflow: hidden;
					position: relative;
					user-select: none;
				}
			}
		}
	}
}
.sales-content {
	position: fixed;
	right: 5px;
	bottom: 205px;
	width: 45px;
	height: 45px;
	background: -webkit-linear-gradient(315deg, #62faff, #32d7e6);
	background: linear-gradient(135deg, #62faff, #32d7e6);
	box-shadow: 0 0 5px 0 rgba(0, 144, 157, 0.3);
	border-radius: 100%;
	z-index: 98;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.sales-head-img-div {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	width: 35px;
	height: 35px;
	border-radius: 100%;
	border: 1px solid #fff;
}
.sales-head-img {
	width: 35px;
	height: 35px;
	border-radius: 100%;
}
.sales-info-div {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.sales-tel-div {
	height: 18px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	right: 0;
	bottom: 0;
}
.sales-tel-icon {
	width: 18px;
	height: 18px;
	padding: 3px;
	border-radius: 100%;
}
.kefubox {
	position: fixed;
	width: 90rpx;
	height: 90rpx;
	right: 10rpx;
	bottom: 100rpx;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 90rpx;
	text-align: center;
	line-height: 90rpx;
	padding: 0rpx;
	.icon-kefu {
		font-size: 60rpx;
		color: #fff;
	}
	.new-offer {
		width: calc(100% - 40rpx);
		height: 400rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.08);
		padding-bottom: 20rpx;

		.title {
			width: 100%;
			height: 100rpx;
			font-size: 40rpx;
			flex-direction: column;

			text {
				z-index: 9;
			}
			.line {
				width: 100rpx;
				height: 10rpx;
				margin-top: -18rpx;
				background: linear-gradient(90deg, #fa9a70, #ff5824);
			}
		}
	}
}
.new-offer-scroll {
	overflow: hidden;
	width: 100%;
	height: calc(400rpx - 100rpx - 20rpx);
}
.kefubox {
	position: fixed;
	width: 90rpx;
	height: 90rpx;
	right: 10rpx;
	bottom: 100rpx;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 90rpx;
	text-align: center;
	line-height: 90rpx;
	padding: 0rpx;
	.icon-kefu {
		font-size: 60rpx;
		color: #fff;
	}
}
.tab-view {
	width: 100%;
}
swiper {
	min-height: 80vh;
}
.f-item {
	overflow: auto;
}
</style>
